'use client'

import {useState} from 'react'
import type {ProColumns} from '@ant-design/pro-components'
import {ProTable} from '@ant-design/pro-components'
import {Button, message, Modal} from 'antd'
import {PlusOutlined} from '@ant-design/icons'

type MenuItem = {
  id: string
  name: string
  path: string
  icon: string
  parentId: string | null
  order: number
  type: 'menu' | 'button'
  permission: string
  status: 'active' | 'inactive'
  createTime: string
}

export default function MenusPage() {
  const [createModalVisible, setCreateModalVisible] = useState(false)

  const columns: ProColumns<MenuItem>[] = [
    {
      title: '菜单名称',
      dataIndex: 'name',
      width: 150,
    },
    {
      title: '路径',
      dataIndex: 'path',
      width: 150,
    },
    {
      title: '图标',
      dataIndex: 'icon',
      width: 80,
    },
    {
      title: '上级菜单',
      dataIndex: 'parentId',
      width: 150,
      render: (_, record) => record.parentId || '-',
    },
    {
      title: '排序',
      dataIndex: 'order',
      width: 80,
    },
    {
      title: '类型',
      dataIndex: 'type',
      width: 100,
      valueEnum: {
        menu: { text: '菜单', status: 'Processing' },
        button: { text: '按钮', status: 'Default' },
      },
    },
    {
      title: '权限标识',
      dataIndex: 'permission',
      width: 150,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 100,
      valueEnum: {
        active: { text: '启用', status: 'Success' },
        inactive: { text: '禁用', status: 'Error' },
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 180,
      valueType: 'dateTime',
    },
    {
      title: '操作',
      width: 180,
      key: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="edit"
          onClick={() => {
            message.info('编辑功能开发中')
          }}
        >
          编辑
        </a>,
        <a
          key="add"
          onClick={() => {
            message.info('添加子菜单功能开发中')
          }}
        >
          添加子菜单
        </a>,
        <a
          key="delete"
          onClick={() => {
            Modal.confirm({
              title: '确认删除',
              content: '确定要删除这个菜单吗？',
              onOk: () => {
                message.success('删除成功')
              },
            })
          }}
        >
          删除
        </a>,
      ],
    },
  ]

  const mockData: MenuItem[] = [
    {
      id: '1',
      name: '系统管理',
      path: '/system',
      icon: 'SettingOutlined',
      parentId: null,
      order: 1,
      type: 'menu',
      permission: 'system',
      status: 'active',
      createTime: '2024-03-01 10:00:00',
    },
    {
      id: '2',
      name: '用户管理',
      path: '/system/users',
      icon: 'UserOutlined',
      parentId: '1',
      order: 1,
      type: 'menu',
      permission: 'system:users',
      status: 'active',
      createTime: '2024-03-01 10:00:00',
    },
    {
      id: '3',
      name: '新增用户',
      path: '',
      icon: '',
      parentId: '2',
      order: 1,
      type: 'button',
      permission: 'system:users:add',
      status: 'active',
      createTime: '2024-03-01 10:00:00',
    },
  ]

  return (
    <ProTable<MenuItem>
      columns={columns}
      dataSource={mockData}
      rowKey="id"
      search={{
        labelWidth: 120,
      }}
      toolBarRender={() => [
        <Button
          key="button"
          icon={<PlusOutlined />}
          type="primary"
          onClick={() => setCreateModalVisible(true)}
        >
          新建
        </Button>,
      ]}
    />
  )
} 